<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </li>
                <li>
                    <SelectIpt><p>业务场景</p></SelectIpt>
                </li>
                <li>
                    <SelectIpt><p>处理状态</p></SelectIpt>
                </li>
                <li>
                    <TextIpt><p>设备编号</p></TextIpt>
                </li>
            </ul>
            <div class="btn">
                <GreenBtn>查询</GreenBtn>
            </div>
        </div>
        <div class="table1">
            <ul>
                <li v-for="index in 8" :key="index">
                    <div class="video">
                        <p class="table-state">未处理</p>
                        <img class="play" src="https://cdn7.axureshop.com/demo2024/2178128/images/%E9%AB%98%E7%A9%BA%E6%8A%9B%E7%89%A9/u18010.svg" alt="">
                    </div>
                    <div class="table-intro">
                        <p class="device-encoding">设备编码：（12341231234234）</p>
                        <p class="location">位置：幸福阳光小区（腾讯大厦B座）</p>
                        <p class="video-time">2020-12-12 12:23:44</p>
                    </div>
                    <div class="video-state">
                        <p>处理</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
export default {
components:{
    SelectIpt,
    TextIpt,
    GreenBtn
},
data(){
 return{
    value:''
 }
}
}
</script>

<style scoped>
.play{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.table1{
    margin-top: 10px;
    background: #fff;
    padding-bottom: 50px;
    padding-top: 20px;
}
.video-state{
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}
.video-state p {
    height: 30px;
    width: 81px;
    text-align: center;
    line-height: 30px;
    color: #FE9400;
    font-size: 12px;
    border: 1px solid #fe9400;
    border-radius: 5px;
}
.location{
    margin:5px 0;
}
.table-intro{
    margin-top: 10px;
}
.table1 ul{
    display: flex;
    flex-wrap: wrap;
}
.table1 li{
    border: 1px solid #cbe1f7;
    padding: 10px;
    border-radius: 5px;
    margin-left: 50px;
    margin-bottom: 20px;
    width: 266px;
}
.table-intro{
    font-size: 12px;
    color: #333;
}
.table-state{
    font-size: 12px;
    background: #ff3b30;
    height: 31px;
    line-height: 31px;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.video{
    height: 153px;
    position: relative;
    background-color: rgba(242, 242, 242, 1);
}
.top>>>.el-date-editor .el-range-separator{
    padding: 0;
}
    .top li{
        margin-bottom: 20px;
    }
</style>